<template>
  <div class="main">
    <div class="zuo">
      <tu :title="title1" :src="src1" :yang="yang" />
      <tu :title="title2" :src="src2" :yang="yang" />
    </div>

    <div class="zhong">
      <div class="ditu">
        <map-two
          :title="titletu"
          :init-zoom="initZoom"
          :initlongitude="initlongitude"
          :initlatitude="initlatitude"
          :data="datatu"
        />
      </div>
    </div>

    <div class="you">
      <div class="table1">
        <newbiao
          class="teshudebiao"
          :title="titlebiao"
          :table-data="tableData"
          :list="list"
          :isxian="isxian"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getData } from "@/api/ik/data/dataApi"
import MapTwo from "@/views/board/components/map2.vue"
import newbiao from "@/views/board/components/newbiao.vue"
import tu from "@/views/board/components/tu.vue"
export default {
  components: {
    MapTwo,
    tu,
    newbiao
  },
  data() {
    return {
      // 左
      yang: { width: "100%", height: "210px" },
      height: "180%",
      title1: "设备",
      src1: "",
      title2: "地图",
      src2: "",
      image: [
        { img: require("@/views/board/img/1.jpg") },
        { img: require("@/views/board/img/2.jpg") },
        { img: require("@/views/board/img/3.jpg") }
      ],
      // 中
      // src:  "@/views/board/img/gong.png",
      initlongitude: "140.330245",
      initlatitude: "18.116879",
      titletu: "工单",
      initZoom: 4.5,
      datatu: [
        {
          code: "code",
          title: "广州",
          x: "113.330245",
          y: "23.116879",
          attr: "",
          num: "10"
        }
      ],

      // 右
      isxian: false,
      title3: "状态",
      data3: [
        { type: "类型1", dep: "部门1", value: "20" },
        { type: "类型2", dep: "部门2", value: "30" },
        { type: "类型3", dep: "部门1", value: "10" },
        { type: "类型4", dep: "部门2", value: "50" }
      ],
      titlebiao: "表单",
      tableData: [

      ],
      list: [
        {
          prop: "text",
          label: "",
          width: "100px"
        },
        { prop: "val", label: "" }
      ],
      type: "",
      code: ""
    }
  },
  created() {
    this.getUrlParams(window.location.href)
    // this.fuzhi()
  },
  methods: {
    fuzhi() {
      this.type = this.$route.params.type
      this.code = this.$route.params.code
      getData('/doms/' + this.type + '/find/all', 'get', {
        searchData: JSON.stringify({
          code: this.code
        }),
        orderData: {},
        token: this.$store.state.user.token
      })
        .then(res => {
          this.initlongitude = res[0].areaBean.locationX
          this.initlatitude = res[0].areaBean.locationY
          this.datatu[0].title = res[0].areaBean.name
          this.datatu[0].x = res[0].areaBean.locationX
          this.datatu[0].y = res[0].areaBean.locationY
          this.tableData[0].bbb = res[0].areaBean.provinceBean.regionBean.name
          this.tableData[1].bbb = res[0].areaBean.provinceBean.name
          this.tableData[2].bbb = res[0].areaBean.name
          this.tableData[4].bbb = res[0].ordTypeItemBean.headBean.name
          this.tableData[5].bbb = res[0].ordTypeItemBean.name
          this.tableData[10].bbb = res[0].remarks

          // 状态
          if (res[0].stateSign === "1") {
            this.isxian = true
            this.tableData[3].bbb = "未执行"
          } else if (res[0].stateSign === "2") {
            this.tableData[3].bbb = "执行中"
          } else {
            this.tableData[3].bbb = "已执行"
          }
          // 设备
          if (
            res[0].machineBean !== null &&
              res[0].machineBean !== undefined
          ) {
            this.tableData[6].bbb = res[0].machineBean.name
            // ;
            // 设备图片
            if (res[0].machineBean.machineTypeBean.code === "JW_SNXJ") {
              this.src1 = require("@/views/board/img/3.jpg")
              // this.src1 = require("@/views/board/img/3.jpg")
            } else if (
              res[0].machineBean.machineTypeBean.code === "JW_SNXS"
            ) {
              this.src1 = require("@/views/board/img/2.jpg")
            } else {
              this.src1 = require("@/views/board/img/1.jpg")
            }
          } else {
            this.src1 = require("@/views/board/img/1.jpg")
          }

          // 指令
          if (
            res[0].machineRouteBean !== null &&
              res[0].machineRouteBean !== undefined
          ) {
            this.tableData[7].bbb = res[0].machineRouteBean.name
          }
          if (
            res[0].machineMapBean !== null &&
              res[0].machineMapBean !== undefined
          ) {
            this.tableData[8].bbb = res[0].machineMapBean.name
          }

          // 地图图片
          if (
            res[0].machineMapBean !== null &&
              res[0].machineMapBean !== undefined
          ) {
            this.src2 =
                'http://39.103.179.114:8084' +
                res[0].machineMapBean.remarks.replace(/\\/g, "/")
          } else {
            this.src2 =
                'http://39.103.179.114:8084/upload/mapImg/hesheng.png'
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 数据
    async getContent(code) {
      getData("/doms/taskOrd/find/all", "get", {
        searchData: JSON.stringify({
          code: code
        }),
        orderData: {},
        token: this.$store.state.user.token
      }).then(res => {
        const list = [
          {
            text: "编码:",
            val: ""
          },
          {
            text: "项目:",
            val: ""
          },
          {
            text: "时间:",
            val: ""
          },
          {
            text: "作业:",
            val: ""
          },
          {
            text: "作业时间:",
            val: ""
          },
          {
            text: "设备编码:",
            val: ""
          },
          {
            text: "设备名:",
            val: ""
          },
          {
            text: "状态:",
            val: ""
          },
          {
            text: "地图:",
            val: ""
          },
          {
            text: "路线:",
            val: ""
          },
          {
            text: "点:",
            val: ""
          },
          {
            text: "任务:",
            val: ""
          },
          {
            text: "模式:",
            val: ""
          }
        ]

        list[0].val = res[0].code
        list[1].val = res[0].areaBean?.name || ''
        list[2].val = res[0].businessTime || ''
        list[3].val = res[0].machineWorkBean?.name || ''
        list[4].val = res[0].machineWorkBean?.name || ''
        list[5].val = res[0].machineBean?.code || ''
        list[6].val = res[0].machineBean?.name || ''
        list[7].val = this.changeText(res[0].exeSign)
        list[8].val = res[0].machineWorkBean?.machineMapBean?.name || ''
        list[9].val = res[0].machineWorkBean?.machineRouteBean?.name || ''
        list[10].val = res[0].machinePointBean?.name || ''
        list[11].val = res[0].machineWorkBean?.machineExeTaskBean?.name || ''
        list[12].val = res[0].machineWorkBean?.machineModeBean?.name || ''
        if (res[0].machineWorkBean?.machineMapBean?.imgPath) {
          this.src2 = 'https://robot-test-cdn1.91hiwork.com/' + res[0].machineWorkBean?.machineMapBean?.imgPath.replaceAll("\\", '/')
        }
        if (res[0].machineBean.machineTypeBean === 'JW_SNXJ') {
          this.src2 = require('@/assets/robot/xunjian.jpg')
        }
        if (res[0].machineBean.machineTypeBean === 'JW_SNXS') {
          this.src2 = require('@/assets/robot/xiaosha.jpg')
        }
        if (res[0].machineBean.machineTypeBean === 'GS_QSBJ') {
          this.src2 = require('@/assets/robot/qingjierobot.jpg')
        }

        this.tableData = list
      })
        .catch(err => {
          console.log(err)
        })
    },
    changeText(code) {
      if (!code) {
        return ''
      }
      if (code === '1') {
        return '未执行'
      }
      if (code === '2') {
        return '执行中'
      }
      if (code === '3') {
        return '已完成'
      }
      if (code === '4') {
        return '已取消'
      }
    },
    getUrlParams(url) {
      // 通过 ? 分割获取后面的参数字符串
      const urlStr = url.split('?')[1]
      // 创建空对象存储参数
      const obj = {}
      // 再通过 & 将每一个参数单独分割出来
      const paramsArr = urlStr.split('&')
      for (let i = 0, len = paramsArr.length; i < len; i++) {
        // 再通过 = 将每一个参数分割为 key:value 的形式
        const arr = paramsArr[i].split('=')
        obj[arr[0]] = arr[1]
      }

      // return obj
      this.getContent(obj.code)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.main {
  width: 100%;
  height: 100%;
  // overflow-y: scroll;
  @import "@/styles/robot/robot.scss";
  .zuo {
    color: rgb(255, 255, 255);
    top: 5%;
    left: 2%;
    position: absolute;
    width: 24%;
    z-index: 999;
    // img {
    //   margin: 0px;
    //   width: 250px;
    //   height: 250px;
    // }
  }
  .zhong {
    top: 0px;
    width: 100%;
    height: 100%;
    .ditu {
      width: 100%;
      height: 100%;
    }
  }

  .you {
    top: 5%;
    right: 5%;
    position: absolute;
    // background-color: red;
    height: 100%;
    width: 25%;
    z-index: 999;
    .table1 {
      height: 90%;
      width: 100%;
    }
  }
}
</style>

<style lang="scss" scoped>

::v-deep.teshudebiao {
  .el-table::before {
    background-color: transparent;
  }
  ::v-deep .el-table__header tr,
  ::v-deep .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    border: 0px;
    color: rgb(255, 255, 255);
  }
  .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table td,
  .el-table th.is-leaf {
    border: 0px;
  }
  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
  }
  .cell {
    color: rgb(255, 255, 255);
  }
  .el-table td,
  .el-table th {
    padding: 9px 0px;
  }
  .el-table tbody tr:hover > td {
    background-color: unset !important;
  }
}
</style>
